<template>
	<div>
		<!-- 列表选择 -->
		<div class="flex items-center justify-between mb-20px">
			<div v-for="(item,index) in list" :key="index"
			class="flex items-center p-20px border-1px  border-solid rounded-12px box-border 
			w-24% cursor-pointer h-90px"
			@click="change(item)"
			:class="{'border-#114CEE':selected.id==item.id,
			'border-#E5E6EB':selected.id != item.id}">
				<img :src="item.icon" class=" w-44px h-44px"/>
				<div class="ml-10px">
					<p class="text-16px mb-10px text-#000000">{{ item.title }}</p>
					<p class="text-#86909C text-12px">{{ item.desc }}</p>
				</div>
			</div>
		</div>
		<!-- 总资产 -->
		<div class="mb-20px">
			<FundAssets></FundAssets>
		</div>
		<!-- 资产列表 -->
		<div>
			<AssetsList></AssetsList>
		</div>
	</div>
</template>
<script lang="ts" setup>
import FundAssets from "./components/FundAssets.vue";
import AssetsList from "./components/AssetsList.vue";


const list = ref<any[]>([
	{
		id:1,
		icon:'/person/fund-1.svg',
		title:'兑换',
		desc:'简单快捷，0手续费'
	},
	{
		id:2,
		icon:'/person/fund-2.svg',
		title:'C2C',
		desc:'多种法币0手续费最优价格'
	},
	{
		id:3,
		icon:'/person/fund-3.svg',
		title:'转账',
		desc:'方便快捷进行资金转移'
	},
	{
		id:4,
		icon:'/person/fund-4.svg',
		title:'资金明细',
		desc:'资金交易明细记录'
	}
])

const selected = ref<any>({
	id:1,
	icon:'/person/fund-1.svg',
	title:'兑换',
	desc:'简单快捷，0手续费'
})

const change = (item:any) => {
	console.log("00000000")
	selected.value = item
}
</script>
